import React, { useState } from 'react';
import { Route } from 'react-router-dom'
import { Layout, Menu, Breadcrumb } from 'antd';
import { DesktopOutlined, FileAddOutlined, NodeIndexOutlined, MessageOutlined, OrderedListOutlined, FormOutlined } from '@ant-design/icons'
import '../static/css/Home.css'
import AddArticle from './AddArticle'
import ArticleList from './ArticleList'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


const Home = (props) => {

    const [collapsed, setCollapsed] = useState(false)

    const onCollapse = collapsed => {
        setCollapsed(collapsed)
    };

    const jump = (e) => {
        console.log(e.key)
        switch (e.key) {
            case '3-1':
                props.history.push('/index/add/')
                break;
            case '3-2':
                props.history.push('/index/articleList/')
                break;
            default:
                break;
        }
    }

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                <div className="logo" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={jump}>
                    <Menu.Item key="1">
                        <DesktopOutlined />
                        <span>工作台</span>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <FormOutlined />
                        <span>添加文章</span>
                    </Menu.Item>
                    <SubMenu
                        key="3"
                        title={
                            <span>
                                <NodeIndexOutlined />
                                <span>文章管理</span>
                            </span>
                        }
                    >
                        <Menu.Item key="3-1">
                            <FileAddOutlined />
                            <span>添加文章</span>
                        </Menu.Item>
                        <Menu.Item key="3-2">
                            <OrderedListOutlined />
                            <span>文章列表</span>
                        </Menu.Item>

                    </SubMenu>

                    <Menu.Item key="4">
                        <MessageOutlined />
                        <span>留言管理</span>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                <Header style={{ background: '#fff', padding: 0 }} />
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>后台管理</Breadcrumb.Item>
                        <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    </Breadcrumb>
                    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                        <Route path='/index/' exact component={AddArticle} />
                        <Route path='/index/add/' exact component={AddArticle} />
                        <Route path='/index/add/:id' exact component={AddArticle} />
                        <Route path='/index/articleList/' exact component={ArticleList} />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>JSPang.com</Footer>
            </Layout>
        </Layout>
    )

}

export default Home